<template>
    <div class="component-select-date" :data="showView">
        <div class="select-btn" v-if="!hideBtn">
            <img src="../assets/choose-rili.png" class="date-icon">
            <span class="date" @click="handleClick(0)">{{val[0]}}</span>
            <template v-if="val[1]">
                <span class="to">--</span>
                <span class="date" @click="handleClick(1)">{{val[1]}}</span>
            </template>
            <img src="../assets/Chevron-bottom.png" class="bottom-icon">
        </div>

        <van-dialog v-model="show" show-cancel-button :before-close="beforeClose">
            <van-datetime-picker class="datetime-picker" v-model="currentDate" type="date" :item-height="80" confirm-button-text=" " cancel-button-text=" "/>
        </van-dialog>

    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-select-date{
        .select-btn{
            text-align: center;
            font-size: 0;
            img, span{
                vertical-align: middle;
            }
            .date-icon{
                height: 1.5rem;
            }
            .bottom-icon{
                height: .5rem;
                margin: .5rem 0;
            }
            .date{
                margin: 0 .5rem;
                font-size: 1.1rem;
                line-height: 1.5rem;
            }
            .to{
                margin: 0 .3rem;
                font-size: 1.1rem;
                line-height: 1.5rem;
            }
        }

        .datetime-picker{
            font-size: 1.4rem;
        }

    }

</style>

<style lang="less">

    @import '../style/variable';

    .van-picker-column__item{
        font-size: 1.4rem;
        line-height: 2rem;
    }

    .van-dialog__confirm, .van-dialog__cancel{
        line-height: 4rem;
        height: 4rem;

        .van-button__text{
            font-size: 1.4rem;
        }
    }

    .van-dialog__confirm{
        color: @app-color;
    }
</style>

<script>

    import {DatetimePicker} from 'vant'

    export default {
        data(){
            return {
                currentDate: new Date(),
                date: this.value,
                show: false,
                key: 0
            }
        },
        created(){
            this.date[0] = this.checkDate(this.value[0]);
            if(this.date[1]){
                this.date[1] = this.checkDate(this.value[1]);
            }
            this.$emit('input', ([]).concat(this.date));
        },
        components: {
            [DatetimePicker.name]: DatetimePicker
        },
        props: ['value', 'hide-btn', 'show-view'],
        beforeUpdate(){
            this.date = this.value;
            this.show = this.show || this.showView;
        },
        methods: {
            handleClick(key){
                this.key = key;
                this.show=true;
            },
            checkDate(date){
                if(!date || !date.match(/^\d{4}\-\d{2}\-\d{2}$/)){
                    date = new Date().toAppDate();
                }
                return date;
            },
            beforeClose(action, done) {
                if (action === 'confirm') {
                    const date = new Date(this.currentDate).toAppDate();
                    this.date[this.key] = date;
                    this.$emit('input', ([]).concat(this.date));
                    this.$emit('onok');
                }
                this.$emit('onhide');
                done();
            }
        },
        computed: {
            val(){
                return this.value;
            }
        }
    }
</script>